
//饼图
function pieEvt(pieData,lengendData,len,ele,color){
    var pie3Opt = {
        color:color,
        backgroundColor: 'transparent',
        legend: {
            show:false,
            orient: 'horizontal',
            top: '72%',
            data:lengendData,
            textStyle:{
                color:'#fff'
            }
        },
        tooltip : {
            trigger: 'item',
            //formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter:function(param){
                if(param.name){
                	return  '<div>'+param.name+'</div>' +
			        '<div>'+param.value+'  ('+param.percent+'%)</div>'
                }
    		},
            position:'right'
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['45%', '50%'],
            hoverAnimation: true,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            data: pieData
        },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['45%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
    };
    var pie3Chart = echarts.init(document.getElementById(ele))
    pie3Chart.setOption(pie3Opt)
    window.addEventListener("resize", function () {
        pie3Chart.resize();
    });
    var pieIndex = 0
    var pieAutoShow = function(){
        if (pieIndex >len-1){
            pieIndex = 0
        }
        for (var i = 0;i <len;i++){
            if (i != pieIndex){
                pie3Opt.series[0].data[i]['selected'] = false;
            }else{
                pie3Opt.series[0].data[i]['selected'] = true;
            }
        }
        //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
        //pie3Opt.series[1].data[0].label.normal.formatter=parseInt(Math.random()*99) + "%"
        pie3Opt.series[1].data[0].label.normal.formatter = (pie3Opt.series[0].data[pieIndex].value/allData(pieData)*100).toFixed(0) + "%"
        pie3Opt.series[1].data[1].label.normal.formatter = "\n" + pie3Opt.series[0].data[pieIndex].name
        pie3Chart.setOption(pie3Opt)
        pieIndex++
        setTimeout(pieAutoShow,1200)
    }
    pieAutoShow()
}

function allData(data){
	var allNum=0
	for(var a=0;a<data.length;a++){
		allNum+=data[a].value
	}
	return allNum
}
var pieData1=[
    {value: 148624, name: "常用工具"},
    {value: 127786, name: "生活实用"},
    {value: 86311, name: "游戏"},
    {value: 58671, name: "休闲益智"},
    {value: 43033, name: "金融理财"},
    {value: 38970, name: "教育学习"},
    {value: 27174, name: "影音图像"},
    {value: 3843, name: "办公工具"},
    {value: 6043, name: "其它"},
]
var lengendData1=['常用工具','生活实用','游戏','休闲益智','金融理财','教育学习','影音图像','办公工具','其它']
var color1=["#09a7e2","#b8ff2e","#09e24b","#09e2cb","#d40d03","#560081","#af0058", "#ff8700", "#ffe34e"];
pieEvt(pieData1,lengendData1,pieData1.length,"appPie1",color1)
var pieData2=[
    {value: 133, name: "易乐游手机助手"},
    {value: 160, name: "360手机助手"},
    {value: 190, name: "百度手机助手"},
    {value: 190, name: "AppChina"},
    {value: 133, name: "搜狗市场"},
    {value: 160, name: "小米应用商城"},
    {value: 190, name: "9553下载"},
    {value: 190, name: "机锋市场"},
    {value: 190, name: "逗游网"},
    {value: 190, name: "新浪网"},
    {value: 190, name: "其它"}
]
var lengendData1=['易乐游手机助手','360手机助手','百度手机助手','AppChina','搜狗市场','小米应用商城','9553下载','机锋市场','逗游网','新浪网','其它']
var color2=["#00a9e1","#0046af","#360293","#560081","#af0058",
"#ff8700", "#09a7e2", "#93dd6e","#fce24f","#b8ff2e","#09e24b","#09e2cb"];
pieEvt(pieData2,lengendData1,pieData2.length,"appPie2",color2)

//地图
var mapData=[
    {name: '北京',value: 359672 },
    {name: '天津',value: 0},
    {name: '上海',value: 0 },
    {name: '重庆',value: 0 },
    {name: '河北',value: 0},
    {name: '河南',value:0 },
    {name: '云南',value: 0 },
    {name: '辽宁',value: 0 },
    {name: '黑龙江',value: 0 },
    {name: '湖南',value: 0 },
    {name: '安徽',value: 0 },
    {name: '山东',value: 0 },
    {name: '新疆',value: 0},
    {name: '江苏',value: 0 },
    {name: '浙江',value: 0 },
    {name: '江西',value: 0 },
    {name: '湖北',value: 180700 },
    {name: '广西',value: 0 },
    {name: '甘肃',value: 0 },
    {name: '山西',value: 0 },
    {name: '内蒙古',value: 0 },
    {name: '陕西',value: 0 },
    {name: '吉林',value: 0 },
    {name: '福建',value: 0 },
    {name: '贵州',value: 0 },
    {name: '广东',value: 83 },
    {name: '青海',value: 0 },
    {name: '西藏',value: 0 },
    {name: '四川',value: 0 },
    {name: '宁夏',value: 0 },
    {name: '海南',value: 0 },
    {name: '台湾',value: 0 },
    {name: '香港',value: 0 },
    {name: '澳门',value: 0 }
]
var geoCoordMap={}
var mapFeatures = echarts.getMap('china').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
var optionMap = {
		tooltip : {
			trigger : 'item',
			formatter : function(param) {
				// console.log(param)
				var value = 0;
				if(param.value[2]){
					value = param.value[2];
				}
				return '<div> '+ param.name+ 'APP数量：'+value+'</div>';
			}
		},
		geo : {
			show : true,
			zoom : 1.2,
			roam : false,
			map : 'china',
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#285ac6',
					borderWidth : 1,
					areaColor : '#123082',
					shadowBlur : 3,
					shadowColor : '#081435',
					shadowOffsetX : -4,
					shadowOffsetY : 8
				},
				emphasis : {
					areaColor : '#fce24f',
					borderColor : '#fce24f'
				}
			}
		},
		series : [ {
			type : 'map',
			zoom : 1.2,
			mapType : 'china',
			// geoIndex: 0,
			roam : false,
			label : {
				normal : {
					show : false,
					textStyle : {
						color : '#fff'
					}
				},
				emphasis : {
					show : true,
					textStyle : {
						color : '#fff'
					}
				}
			},
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#3770ea',
					borderWidth : 1,
					areaColor : '#0f2d87'
				},
				emphasis : {
					areaColor : '#2a56bd',
					borderColor : '#2a56bd',
				// opacity: 0.8,
				}
			},
			data : convertData(mapData)
		}, {
			name : 'Top 5',
			type : 'effectScatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				return val[2] / 359672 * 15 + 10
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(mapData.sort(function(a, b) {
				return b.value - a.value
			}).slice(0, 5))
		}, {
			name : 'Top 5',
			type : 'scatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				return val[2] / 359672 * 15
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(mapData.sort(function(a, b) {
				return b.value - a.value;
			}).slice(5))
		} ]
};
var mapChart = echarts.init(document.getElementById('APPChina'))
mapChart.setOption(optionMap)
window.addEventListener("resize", function () {
    mapChart.resize();
});


//右下折线图
//var timeData= ['2017-03','2017-04','2017-05','2017-06','2017-07','2017-08','2017-09','2017-10','2017-11','2017-12','2018-01','2018-02']
//var data1=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 354260, 186195]
//var data2=[120, 182, 301, 234, 190, 150, 110, 202, 201, 364, 190, 70]
var timeData = ['2017-12 第一周','2017-12 第二周','2017-12 第三周','2017-12 第四周','2018-01 第一周','2018-01 第二周','2018-01 第三周','2018-01 第四周','2018-01 第五周','2018-02 第一周','2018-02 第二周','2018-02 第三周','2018-02 第四周','2018-03 第一周','2018-03 第二周','2018-03 第三周','2018-03 第四周']
var data1 = [1,1,1564,1299,199,3631,1929,2697,928,567,279,124,1507,631,1,1,1]
var data2 = [1,1,3366,45662,9085,20811,158238,382692,435564,1313,10158,93,7632,19576,22058,962,8635]
var lineOption = {
    color : ["#1de5f2","#0edf4d"],
    legend: {
    	show:true,
    	textStyle:{
    			color: 'rgba(255,255,255,0.8)'
    		}
    },
    tooltip : {
        trigger: 'axis',
    },
    grid: {
        top:30,
        left: '3%',
        right: '3%',
        bottom: 10,
        containLabel: true
    },
    xAxis: {
        boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            },
            rotate : 45
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        data : timeData
    },
    yAxis : {
    	type:'log',
    	logBase:10,
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:'app应用数',
            type:'line',
            smooth:true,
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0
                }
            },
            data:data1
        },
        {
            name:'app商城数据',
            type:'line',
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#0edf4d',
            }},
           /* areaStyle: {
                normal: {
                    color:'#0edf4d',
                    opacity: 0.2
                }
            },*/
            data:data2
        }
    ]
};
var lineChart = echarts.init(document.getElementById('appLine'))
lineChart.setOption(lineOption);
window.addEventListener("resize", function () {
    lineChart.resize();
});




